<script lang="ts">
import { computed, defineComponent } from "vue";

const RATE = 100;

export default defineComponent({
  props: {
    modelValue: { type: Number, required: true },
    backgroundColor: { type: String, default: "#f4ede7" },
    activeColor: { type: String, default: "#ff7900" },
  },
  setup(props) {
    const getRotateDeg = (value: number) => {
      const progress = Math.min(0.5, value / RATE);
      return `${360 * progress}deg`;
    };

    const option = computed(() => {
      const isHalf = props.modelValue >= RATE / 2;
      return {
        leftTransform: isHalf
          ? `rotate(${getRotateDeg(props.modelValue - RATE / 2)})`
          : "",
        rightBgColor: isHalf ? props.activeColor : props.backgroundColor,
        rightTransform: isHalf
          ? ""
          : `rotate(${getRotateDeg(props.modelValue)})`,
      };
    });
    return { option };
  },
});
</script>

<template>
  <view class="circle" :style="{ backgroundColor: activeColor }">
    <view
      class="circle-left"
      :style="{ backgroundColor, transform: option.leftTransform }"
    ></view>
    <view
      class="circle-right"
      :style="{
        backgroundColor: option.rightBgColor,
        transform: option.rightTransform,
      }"
    ></view>
    <view class="circle-content">
      <slot />
    </view>
  </view>
</template>

<style lang="scss">
.circle {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1em;
  height: 1em;
  border-radius: 50%;

  .circle-left,
  .circle-right {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip: rect(0, 0.5em, auto, 0);
    border-radius: 50%;
  }

  .circle-right {
    clip: rect(0, auto, auto, 0.5em);
  }

  .circle-content {
    position: relative;
    border-radius: 50%;
    background-color: #ffffff;
    overflow: hidden;
  }
}
</style>
